<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
  相对定位和绝对定位
  1.相对定位:相对原来位置进行偏移
    position: relative; 相对定位后仍符合文档标准流，原来位置被被保留
  2.绝对定位
    1.没有父元素定位的前提下，相对浏览器定位
    2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
    3.在父级元素范围内移动
    相对父级或浏览器的位置，进行指定偏移，绝对定位的华，它不存在标准文档流中，原来位置不会被保留
  3.固定定位
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background-color: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
   4.z-index : 0 是最底层
               opacity:0-1  变换透明度

  -->
  <style>
    body{
      margin: 20px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
       border: 1px solid #666;
      position: relative;
    }
    #first{
       background-color: hotpink;
       border: 1px solid #5e1515;
       position: relative;/* 相对定位：上下左右*/
       top:-30px;
       left:20px
    }
    #second{
      background-color: #721cb3;
      border: 1px solid #b6552b;
      position: absolute;
      right: 20px;
    }
    #third{
      background-color: #96b3fc;
      border: 1px solid #095cbf;
      position: relative;
      bottom: -20px;
    }
  </style>
</head>
<body>


<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>


</div>
</body>
</html>
